<template>
  <view class="pay-config">
    <view class="header">
      <text class="title">支付配置</text>
    </view>
    
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>
    
    <view v-else class="config-content">
      <!-- 支付方式 -->
      <view class="section">
        <view class="section-title">支付方式</view>
        <view class="method-list">
          <view 
            class="method-item" 
            v-for="method in paymentMethods" 
            :key="method.method"
            :class="{ active: method.enabled }"
          >
            <view class="method-info">
              <image :src="method.icon" class="method-icon" mode="aspectFit"></image>
              <view class="method-details">
                <text class="method-name">{{ method.name }}</text>
                <text class="method-desc">{{ method.description }}</text>
              </view>
            </view>
            <view class="method-status">
              <text class="status-text" :class="{ enabled: method.enabled }">
                {{ method.enabled ? '已启用' : '未启用' }}
              </text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 支付限额 -->
      <view class="section">
        <view class="section-title">支付限额</view>
        <view class="limit-list">
          <view class="limit-item">
            <text class="limit-label">单笔支付限额</text>
            <text class="limit-value">¥{{ paymentLimits.singleLimit || '无限制' }}</text>
          </view>
          <view class="limit-item">
            <text class="limit-label">日累计限额</text>
            <text class="limit-value">¥{{ paymentLimits.dailyLimit || '无限制' }}</text>
          </view>
          <view class="limit-item">
            <text class="limit-label">月累计限额</text>
            <text class="limit-value">¥{{ paymentLimits.monthlyLimit || '无限制' }}</text>
          </view>
        </view>
      </view>
      
      <!-- 支付配置 -->
      <view class="section">
        <view class="section-title">支付配置</view>
        <view class="config-list">
          <view class="config-item">
            <text class="config-label">支付超时时间</text>
            <text class="config-value">{{ paymentConfig.timeoutMinutes || 30 }}分钟</text>
          </view>
          <view class="config-item">
            <text class="config-label">自动确认收货</text>
            <text class="config-value">{{ paymentConfig.autoConfirmDays || 7 }}天</text>
          </view>
          <view class="config-item">
            <text class="config-label">退款期限</text>
            <text class="config-value">{{ paymentConfig.refundDays || 7 }}天</text>
          </view>
        </view>
      </view>
      
      <!-- 安全设置 -->
      <view class="section">
        <view class="section-title">安全设置</view>
        <view class="security-list">
          <view class="security-item">
            <view class="security-info">
              <text class="security-label">支付密码</text>
              <text class="security-desc">设置支付密码，提高账户安全性</text>
            </view>
            <switch 
              :checked="paymentConfig.requirePassword" 
              @change="togglePassword"
              color="#007aff"
            />
          </view>
          <view class="security-item">
            <view class="security-info">
              <text class="security-label">风控检测</text>
              <text class="security-desc">启用支付风控检测</text>
            </view>
            <switch 
              :checked="paymentConfig.enableRiskCheck" 
              @change="toggleRiskCheck"
              color="#007aff"
            />
          </view>
        </view>
      </view>
      
      <!-- 联系信息 -->
      <view class="section">
        <view class="section-title">联系信息</view>
        <view class="contact-list">
          <view class="contact-item">
            <text class="contact-label">客服电话</text>
            <text class="contact-value">{{ paymentConfig.servicePhone || '暂无' }}</text>
          </view>
          <view class="contact-item">
            <text class="contact-label">客服邮箱</text>
            <text class="contact-value">{{ paymentConfig.serviceEmail || '暂无' }}</text>
          </view>
          <view class="contact-item">
            <text class="contact-label">工作时间</text>
            <text class="contact-value">{{ paymentConfig.serviceHours || '9:00-18:00' }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { payService } from '@/services/pay.js'

export default {
  data() {
    return {
      loading: true,
      paymentMethods: [],
      paymentLimits: {},
      paymentConfig: {}
    }
  },
  
  onLoad() {
    this.loadConfig()
  },
  
  methods: {
    async loadConfig() {
      try {
        // 并行加载所有配置
        const [methodsRes, limitsRes, configRes] = await Promise.all([
          payService.getPaymentMethods(),
          payService.getPaymentLimits(),
          payService.getPaymentConfig()
        ])
        
        if (methodsRes.success) {
          this.paymentMethods = methodsRes.data || []
        }
        
        if (limitsRes.success) {
          this.paymentLimits = limitsRes.data || {}
        }
        
        if (configRes.success) {
          this.paymentConfig = configRes.data || {}
        }
      } catch (error) {
        console.error('加载支付配置失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    togglePassword(e) {
      this.paymentConfig.requirePassword = e.detail.value
      this.saveConfig()
    },
    
    toggleRiskCheck(e) {
      this.paymentConfig.enableRiskCheck = e.detail.value
      this.saveConfig()
    },
    
    async saveConfig() {
      try {
        const res = await payService.updatePaymentConfig(this.paymentConfig)
        
        if (res.success) {
          uni.showToast({
            title: '配置已保存',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: res.message || '保存失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('保存配置失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-config {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .header {
    background-color: #fff;
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .loading {
    text-align: center;
    padding: 200rpx 0;
    color: #999;
    font-size: 28rpx;
  }
  
  .config-content {
    .section {
      background-color: #fff;
      margin-bottom: 20rpx;
      padding: 30rpx;
      
      .section-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 30rpx;
      }
    }
    
    .method-list {
      .method-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .method-info {
          display: flex;
          align-items: center;
          
          .method-icon {
            width: 60rpx;
            height: 60rpx;
            margin-right: 20rpx;
          }
          
          .method-details {
            .method-name {
              display: block;
              font-size: 28rpx;
              color: #333;
              margin-bottom: 8rpx;
            }
            
            .method-desc {
              font-size: 24rpx;
              color: #999;
            }
          }
        }
        
        .method-status {
          .status-text {
            font-size: 26rpx;
            color: #999;
            
            &.enabled {
              color: #52c41a;
            }
          }
        }
      }
    }
    
    .limit-list, .config-list, .contact-list {
      .limit-item, .config-item, .contact-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .limit-label, .config-label, .contact-label {
          font-size: 28rpx;
          color: #333;
        }
        
        .limit-value, .config-value, .contact-value {
          font-size: 28rpx;
          color: #666;
        }
      }
    }
    
    .security-list {
      .security-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .security-info {
          .security-label {
            display: block;
            font-size: 28rpx;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .security-desc {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}
</style> 